<template>
  <div id="main" style="width: 500px; height: 500px"></div>
</template>


<script>
import * as echarts from "echarts";
import axios from "axios";
import { onMounted } from "vue";
export default {
  name: "one4",
  setup() {
    onMounted(() => {
      datainit();
    });
    let dataAll = [];
    let bool = false;
    const datainit = () => {
      let url = "/api/total";
      axios.get(url).then((res) => {
        console.log(res);

        let data = res.data;
        for (let i in data) {
          for (let j in dataAll) {
            if (dataAll[j].name == data[i].region) {
              dataAll[j].value = dataAll[j].value + data[i].Gtp;
              bool = true;
            }
          }
          if (!bool) {
            let map = { name: data[i].region, value: data[i].Gtp };
            dataAll.push(map);
          }
          bool = false;
        }

        dataAll.sort((a, b) => b.value - a.value);
        dataAll = dataAll.slice(0, 10);

        let citys = [];
        let buys = [];
        for (let i in dataAll) {
          citys.push(dataAll[i].name);
          buys.push(dataAll[i].value);
        }
        console.log(citys);
        console.log(buys);
        init(citys, buys);
      });
    };
    const init = (citys, buys) => {
      let option = {
        title: {
          text: "2023散点图展示省份平均消费额",
        },
        xAxis: {
          data: citys,
          name: "省份",
        },
        yAxis: {
          name: "平均消费额",
        },
        series: [
          {
            data: buys,
            type: "scatter",
          },
        ],
      };
      let myChart = echarts.init(document.getElementById("main"));
      myChart.setOption(option);
    };
  },
};
</script>


<style></style>